<template>
	<view style="color:#fbffef">
		<view class="tab">
			<scroll-view class="scroll-x" scroll-x="true">
				<view class="topBar">
					<view>要文</view>
					<view>推荐</view>
					<view>关注流</view>
					<view>24小时</view>
					<view>娱乐</view>
					<view>桂林</view>
					<view>财经</view>
					<view>军事</view>
					<view>科技</view>
					<view>汽车</view>
					<view>音乐</view>
					<view>体育</view>
					<view>生活</view>
				</view>
			</scroll-view>
			<view class="weather-search-container" >
				<view class="weather-container" @click="getWeather()">
					<view class="weather-info"v-if="weatherData">
						<view >
							<text>{{ weatherData.time}}/</text>
							<text>{{ weatherData.cityInfo.city  }}/</text>
							<text>{{ weatherData.data.wendu }}°/</text>
							<text>{{ weatherData.data.forecast[0].type }}/</text>
							<text>{{ weatherData.data.quality }}/</text>
							<text>{{ weatherData.data.forecast[0].high }}/</text>
							<text>{{ weatherData.data.forecast[0].low }}/</text>
							<text>{{ weatherData.data.forecast[0].fx }}{{ weatherData.data.forecast[0].fl }}</text>
						</view>
					</view>
					<view class="weather-loading" v-else-if="loading">
						<text>获取天气中...</text>
					</view>
					<view class="weather-placeholder" v-else>
						<text>点击获取天气</text>
					</view>
				</view>
				<view class="search-container">
					<input type="text" class="search" placeholder="搜索关键词"></input>
				</view>
			</view>
		</view>
		<view class="refresh">为您更新了15条内容</view>
		<view v-for="item in newsList" style="margin:10rpx">
			<cardTopVue :title="item.title" :isTop="item.isTop" :author="item.author" :comments="item.comments"
				:time="item.time" :mode="item.newstype" :images="item.imagelist" :showSearch="item.showSearch"
				:bgColor="item.bgcolor">
				<template v-slot:tips>
					<view v-if="item.showSearch" class="slotcontent">
						<text>搜索：</text>
						<view class="borderbox"><text>今日好价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</cardTopVue>
		</view>

	</view>
</template>

<script>
	import cardTopVue from '../../../components/cardViewText.vue'
	export default {
		components: {
			cardTopVue
		},
		data() {
			return {
				newsList: [],
				weatherData: null,
				loading: false
			}
		},
		onLoad() {
			this.newsList = getApp().globalData.datalist;
			console.log("onLoad--> newsList: " + this.newsList.length);
			// 页面加载时自动获取天气
			this.getWeather();
		},
		methods: {
			getWeather() {
				this.loading = true;
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						console.log("success-----" + JSON.stringify(res));
						if (res.data.status === 200) {
							this.weatherData = res.data;
						} else {
							uni.showToast({
								title: '天气数据获取失败',
								icon: 'none'
							});
						}
						this.loading = false;
					},
					fail: (eMsg) => {
						console.log("request fail-----" + eMsg);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
						this.loading = false;
					}
				});
			}
		}
	}
</script>

<style>
	.tab {
		background-color: #d04500;
		width: 100%;
		padding: 10rpx;
	}

	.topBar {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		line-height: 60rpx;
	}

	.weather-search-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.weather-container {
		flex: 1;
		padding: 15rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

	.weather-info .city {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.weather-info .temp {
		display: flex;

		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.weather-desc {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.weather-type {
		font-size: 24rpx;
		margin-right: 15rpx;
	}

	.air-quality {
		font-size: 20rpx;
		background-color: #4CAF50;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}

	.weather-details {
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.weather-loading, .weather-placeholder {
		font-size: 26rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.refresh {
		padding: 15rpx;
		background-color: #ffaa7f;
	}

	.search {
		width: 230rpx;
		margin-right: 20rpx;
		font-size: 25rpx;
		text-align: center;
		background-color: aliceblue;
		border-radius: 20rpx;
	}

	.slotcontent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding-left: 10px;
		color: #aaf;
		font-size: 20rpx;
	}

	.borderbox {
		margin: 5px;
		border-radius: 5px;
		border: 1px solid gray;
	}
</style>